<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户详情页面</title>
    <script th:src="@{/webjars/jquery/3.3.1/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/4.3.1/js/bootstrap.min.js}"></script>
<!--    网页标题图标-->
    <!--    解释css-->
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.min.css}"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <!--    引入自己写的css样式-->
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/goodsStyle.css}">

    <link rel="shortcut icon" th:href="@{/static/favicon.ico}">

</head>
<style>

    h4 span{
        padding: 2px 10px;
        background-color: #be2773;
        border-radius: 10px 10px 10px 10px;
        color: #73fcfc;
        display:inline-block;
        height: 35px;
    }

</style>
<body>
<!--商品展示页-->
<div id="showShop" style="width: 420px;margin: 70px auto;padding: 20px 20px 70px 20px;box-shadow: 0px 0px 100px 10PX black;" class="jumbotron">
    <h4><span th:text="${goods.goodsName}"></span></h4>
    <div style="text-align: center">
        <span th:if="${goods.goodsImg eq null}">
         <img style="width: 200px; height: 200px" th:src="@{/tmp/error.jpg}">
    </span>
        <span th:if="${goods.goodsImg ne null}">
        <img style="width: 200px; height: 200px" th:src="@{${goods.goodsImg}}" alt="回显图片挂了">
    </span>
    </div>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  折扣<span id="goodDiscount" ></span>
  <div id="Discount">
      <div id="left"></div>
      <div id="division"></div>
      <div id="right"><del th:text="'￥'+${goods.goodsPrice}"></del></div>
  </div>
  <br>
<!--      按钮-->
  <div class="container" style="width:100%;padding: 0;margin: 0;">
      <button type="submit" style="float: left;" onclick="javascript:history.back(-1);"  class="btn btn-primary">返回</button>

      <button style="float: right;"  class="btn btn-primary btn-lg" th:onclick="popModal()" role="button">购买</button>
  </div>
</div>
<!--购买弹出框-->
<!-- Modal -->
<div class="modal fade" id="popModal" tabindex="-1" aria-labelledby="popModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="popModalLabel">购买</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                    <div class="input-group w-50">
                        <button class="btn btn-outline-secondary" id="minusBtn">
                            <i class="bi bi-dash-square"></i>
                        </button>
                        <input type="text" id="number" class="form-control" value="1">
                        <button class="btn btn-outline-secondary" id="plusBtn">
                            <i class="bi bi-plus-square"></i>
                        </button>
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
</body>
<script th:inline="javascript">
   $(function (){
       //打折后
       var discount=[[${goods.goodsDiscount}]];
       //原价
       var price=[[${goods.goodsPrice}]]
       //总价格
       var totalP=price*discount;
       //设置打折的数字
       $("#goodDiscount").text(parseInt(discount*100)+'%');
       $("#left").text('￥'+totalP);
       $("#number").keyup(function (){
           alert($(this).val());
       })
   })

   function popModal(){
       $("#popModal").modal("show");
   }
   // function closeBox(){
   //     $("#popBox").hide();
   //
   // }
</script>
</html>